<script setup>
import { ref, onMounted, inject, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useCommonStore } from '../stores/commonStore';
const route = useRoute()
// 获取当前的页面路径
const status = ref(route.name ? route.name : 'home')
// 注入从home获取到的归档数
const total = ref('')
// 是否展示搜索框
const dialogTableVisible = inject('dialogTableVisible')

watch(route, () => {
  status.value = route.name ? route.name : 'home'
})

onMounted(() => {
  setTimeout(() => {
    total.value = useCommonStore().article
  }, 100);
})


</script>

<template>
  <div class="pt-3 text-sm font-semibold tracking-widest text-gray-500 bg-white">

    <router-link
      to="/"
      :class="[status === 'home' ? 'bg-gray-100' : '']"
      @click="status = 'home'"
      class="flex items-center px-4 py-2 space-x-3 cursor-pointer group hover:bg-gray-100"
    >
      <svg
        t="1707795077610"
        class="w-5 h-5 duration-300 ease-in-out group-hover:scale-110 "
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M426.666667 853.333333v-256h170.666666v256h213.333334v-341.333333h128L512 128 85.333333 512h128v341.333333z"
        ></path>
      </svg>
      <div class="">
        首页
      </div>
    </router-link>

    <router-link
      to="/about"
      :class="[status === 'about' ? 'bg-gray-100' : '']"
      @click="status = 'about'"
      class="flex items-center px-4 py-2 space-x-3 cursor-pointer group hover:bg-gray-100"
    >
      <svg
        t="1707795418979"
        class="w-5 h-5 duration-300 ease-in-out group-hover:scale-110 "
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M504.951 511.98c93.49 0 169.28-74.002 169.28-165.26 0-91.276-75.79-165.248-169.28-165.248-93.486 0-169.287 73.972-169.279 165.248-0.001 91.258 75.793 165.26 169.28 165.26z m77.6 55.098H441.466c-120.767 0-218.678 95.564-218.678 213.45V794.3c0 48.183 97.911 48.229 218.678 48.229H582.55c120.754 0 218.66-1.78 218.66-48.229v-13.77c0-117.887-97.898-213.45-218.66-213.45z"
        ></path>
      </svg>
      <div>关于</div>
    </router-link>

    <router-link
      to="/front"
      :class="[status === 'front' ? 'bg-gray-100' : '']"
      @click="status = 'front'"
      class="flex items-center px-4 py-2 space-x-3 cursor-pointer group hover:bg-gray-100"
    >
      <svg
        t="1707796532910"
        class="w-5 h-5 duration-300 ease-in-out group-hover:scale-110 "
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="50326"
      >
        <path
          d="M670.254545 316.509091l83.781819 83.781818-176.872728 172.218182-223.418181-223.418182L46.545455 651.636364l107.054545 107.054545L353.745455 558.545455l223.418181 228.072727 283.927273-283.927273 79.127273 83.781818L977.454545 279.272727z"
        ></path>
      </svg>
      <div>
        前端
      </div>
    </router-link>
    <router-link
      to="/back"
      :class="[status === 'back' ? 'bg-gray-100' : '']"
      @click="status = 'back'"
      class="flex items-center px-4 py-2 space-x-3 cursor-pointer group hover:bg-gray-100"
    >
      <svg
        t="1707796603571"
        class="w-5 h-5 duration-300 ease-in-out group-hover:scale-110 "
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M179.721956 343.751111a100.892444 100.892444 0 1 0-107.989334-100.608 104.561778 104.561778 0 0 0 107.989334 100.608m360.533333 83.768889a51.84 51.84 0 0 0-53.347556-50.048H90.363733a93.454222 93.454222 0 0 0-65.152 25.770667 81.934222 81.934222 0 0 0-25.130666 62.037333l10.552889 183.907556c2.176 33.223111 29.482667 28.444444 63.914666 31.431111l14.222222 159.516444a52.736 52.736 0 0 0 53.674667 47.089778h71.992889a52.280889 52.280889 0 0 0 53.674667-47.075556l27.022222-332.202666 190.577778-30.72a51.626667 51.626667 0 0 0 54.613333-49.635556m405.475556-262.684444H455.874844a75.719111 75.719111 0 0 0-78.222222 72.775111v110.506666h108.288a76.444444 76.444444 0 1 1 3.726222 152.689778l-112.014222 18.346667v119.950222a75.733333 75.733333 0 0 0 78.222222 72.832H945.801956a75.733333 75.733333 0 0 0 78.222222-72.817778V237.596444a75.761778 75.761778 0 0 0-78.222222-72.817777v0.113777z m-22.656 137.301333l-107.975112 167.992889c-3.271111 4.252444-8.049778 7.068444-13.340444 7.907555a17.223111 17.223111 0 0 1-14.222222-4.906666l-54.926222-51.086222-60.501334 113.507555c-2.574222 5.12-7.637333 8.519111-13.340444 8.96H655.668622a20.110222 20.110222 0 0 1-12.714666-5.020444l-36.309334-33.664a16.099556 16.099556 0 0 1 0-23.552V482.133333a19.214222 19.214222 0 0 1 25.443556 0l18.915555 17.379556 60.515556-113.038222c2.858667-4.835556 7.765333-8.135111 13.340444-8.96 5.546667-0.611556 11.093333 1.194667 15.203556 4.977777l55.850667 52.096 96.497777-149.219555a18.844444 18.844444 0 0 1 24.817778-5.973333 15.516444 15.516444 0 0 1 5.888 22.755555l0.028445 0.071111z"
          fill="#323233"
        ></path>
      </svg>
      <div>
        后端
      </div>
    </router-link>
    <router-link
      to="/life"
      :class="[status === 'life' ? 'bg-gray-100' : '']"
      @click="status = 'life'"
      class="flex items-center px-4 py-2 space-x-3 cursor-pointer group hover:bg-gray-100"
    >
      <svg
        t="1707796697641"
        class="w-5 h-5 duration-300 ease-in-out group-hover:scale-110 "
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M66.799382 576.787562c0 210.317053 174.173878 380.876614 388.93822 380.876614 214.767412 0 388.93822-170.559561 388.93822-380.876614 0-71.901587-31.500435-163.309436-56.916291-202.13879-22.016433-33.264615-29.599132-54.624085-29.599132-85.84311 0-65.021899 70.007447-130.051985 143.43069-130.051985l9.487072 0c26.183336 0 47.432289-20.806885 47.432289-46.438659 0-25.648147-21.248953-46.462195-47.432289-46.462195l-9.487072 0c-116.675326 0-216.480426 60.948117-240.196571 185.798637-48.570205-36.039821-124.07997-55.737442-205.656917-55.737442C240.97326 195.915042 66.799382 366.470509 66.799382 576.787562zM408.305313 576.787562c0-25.631774 21.253046-46.445822 47.432289-46.445822 26.183336 0 47.429219 20.814048 47.429219 46.445822 0 25.631774-21.245883 46.445822-47.429219 46.445822C429.558359 623.233384 408.305313 602.419336 408.305313 576.787562zM161.66089 576.787562c0-46.267766 38.133505-83.606163 85.377506-83.606163 47.24707 0 85.377506 37.338397 85.377506 83.606163 0 46.270836-38.130436 83.609233-85.377506 83.609233C199.794395 660.396795 161.66089 623.058398 161.66089 576.787562zM579.056232 576.787562c0-46.267766 38.133505-83.606163 85.377506-83.606163 47.25014 0 85.380576 37.338397 85.380576 83.606163 0 46.270836-38.130436 83.609233-85.380576 83.609233C617.189737 660.396795 579.056232 623.058398 579.056232 576.787562zM370.364189 781.163299c0-46.267766 38.126342-83.606163 85.373413-83.606163 47.244001 0 85.377506 37.338397 85.377506 83.606163 0 46.270836-38.133505 83.609233-85.377506 83.609233C408.490531 864.772532 370.364189 827.434136 370.364189 781.163299zM370.364189 372.422058c0-46.270836 38.126342-83.616396 85.373413-83.616396 47.244001 0 85.377506 37.34556 85.377506 83.616396 0 46.260603-38.133505 83.599-85.377506 83.599C408.490531 456.021058 370.364189 418.682661 370.364189 372.422058z"
          fill="#2c2c2c"
        ></path>
      </svg>
      <div>
        生活花絮
      </div>
    </router-link>
    <router-link
      to="/archives"
      :class="[status === 'archives' ? 'bg-gray-100' : '']"
      @click="status = 'archives'"
      class="flex items-center px-4 py-2 space-x-3 cursor-pointer group hover:bg-gray-100"
    >

      <div class="flex items-center space-x-3">
        <svg
          t="1707796777122"
          class="w-5 h-5 duration-300 ease-in-out group-hover:scale-110 "
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M1007.59363457 601.95586189l-112.39781282-322.05153254c-4.46471866-17.47092413-22.1302756-30.47844469-44.45386889-30.47844467H661.6640765v93.18045383h153.35749689l88.52110237 279.34409849h-150.44589539c-26.78962705 0-48.92121773 22.1302756-48.92121774 48.92121774v48.91858756H333.20807272v-48.91990266c0-26.78831196-22.1302756-48.91990264-48.91990264-48.91990264h-150.44589539l88.52110237-279.34409849h169.08067107v-93.18045383H186.64431268c-22.1302756 0-35.13648107 12.81288775-44.45518399 30.47844467l-123.46295061 322.05153254c0 4.46471866-4.46471866 9.31870292-4.46471866 17.47223922v296.23243931c0 26.78962705 22.1302756 48.91990264 48.91990264 48.91990263h896.66016667c26.78831196 0 48.91858756-22.1302756 48.91858757-48.91990263l5.6298853-292.35030397"
          ></path>
          <path
            d="M358.05400194 449.4150334c0 14.36600492 5.24193478 29.70122856 14.36600489 34.94184825l122.8803673 122.88168239c10.09460396 10.09460396 24.46060886 14.36468983 34.94184827 14.36468982 14.36600492 0 29.70122856-5.2406197 33.7779967-14.36468982l122.8816824-122.88168239c10.09328888-10.09328888 14.36468983-24.45929378 14.36468981-34.94184825 0-29.70122856-24.46060886-54.35515514-54.35515514-54.35515515-14.36468983 0-29.70122856 5.24193478-34.94184826 14.36600491l-35.13779615 34.94184825V120.76308174c0-29.70122856-24.45929378-54.35515514-54.35384005-54.35515514s-54.35515514 24.46060886-54.35515515 54.35515514v323.60464967l-34.94184825-34.94184825c-10.09460396-10.09460396-24.46060886-14.36600492-34.94184824-14.36600491-15.33653875 5.24193478-40.18509812 24.84855938-40.18509813 54.35515515z"
          ></path>
        </svg>

        <div>
          归档
        </div>
      </div>
      <div class="flex justify-end grow">
        <div
          class="h-5 px-1 text-white bg-gray-300 rounded-full"
        >
          {{ useCommonStore().article }}
        </div>
      </div>

    </router-link>

    <div @click="dialogTableVisible = true">
      <div
        :class="[status === 'search' ? 'bg-gray-100' : '']"
        @click="status = 'search'"
        class="flex items-center px-4 py-2 space-x-3 cursor-pointer group hover:bg-gray-100"
      >
        <svg
          t="1707796816965"
          class="w-5 h-5 duration-300 ease-in-out group-hover:scale-110 "
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M998.701176 827.181176L766.960941 595.440941c77.793882-153.735529 47.917176-343.988706-74.420706-466.29647-76.016941-76.016941-177.091765-117.895529-284.611764-117.880471-107.504941 0-208.579765 41.863529-284.611765 117.880471-156.928 156.928-156.928 412.265412 0 569.20847 75.941647 75.941647 176.911059 117.744941 284.310588 117.744941a401.618824 401.618824 0 0 0 207.23953-57.298823l226.093176 226.108235a75.535059 75.535059 0 0 0 52.946824 22.166588c18.507294 0 35.704471-7.002353 48.429176-19.727058l58.789647-58.774589c27.301647-27.271529 26.202353-72.764235-2.424471-101.391059zM611.478588 617.276235c-54.377412 54.377412-126.644706 84.314353-203.535059 84.314353s-149.172706-29.936941-203.535058-84.314353c-112.218353-112.218353-112.218353-294.851765 0-407.070117 54.362353-54.377412 126.644706-84.299294 203.535058-84.299294s149.157647 29.921882 203.535059 84.299294c112.218353 112.218353 112.218353 294.836706 0 407.070117z"
          ></path>
        </svg>
        <div>
          搜索
        </div>
      </div>
    </div>
  </div>
</template>

<style
  scoped
  lang='scss'
></style>../../stores/commonStore